<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>发帖页面</title>
    <style type="text/css">
        #container {
            width: 1000px;
            border: solid 2px green;
            margin: 50px auto;
            padding: 30px;
        }
        input {
            margin: 10px 0;
        }
    </style>
    <script th:src="@{/ckeditor/ckeditor.js}"></script>
</head>
<body>
<div id="container">
    <form action="#" method="post" enctype="multipart/form-data">
        标题：
        <input type="text" name="title" th:value="${ post?.title }">
        <br>
        类别：
        <select name="type">
            <th:block th:each="type : ${ types }">
                <option th:text="${ type.desc }" th:value="${ type.name() }" selected="selected" th:if="${ post?.type == type }"></option>
                <option th:text="${ type.desc }" th:value="${ type.name() }" th:if="${ post?.type != type }"></option>
            </th:block>
        </select>
        <br>
        内容：
        <textarea name="editor1" id="editor1" rows="10" cols="80" th:text="${ post?.content }"></textarea>
        <input type="hidden" name="content" th:text="${ post?.content }"/>
        <input type="hidden" name="summary" th:text="${ post?.summary }"/>
        <br>
        主图：
        <input type="file" name="file">
        <br>
        <input id="sub_btn" type="button" value="发帖">
        <br>
        <span style="color:red" th:text="${ message }"></span>
        <br>
    </form>
</div>

<script type="text/javascript" th:src="@{/js/jquery-3.4.1.js}"></script>
<script type="text/javascript">
    // 初始化ckeditor
    CKEDITOR.replace('editor1');

    $('#sub_btn').click(function() {

        // 获取带样式的内容（html代码）
        let content = CKEDITOR.instances.editor1.getData();
        // 获取纯文本内容，并截取前10个字符作为摘要
        let summary = CKEDITOR.instances.editor1.document.getBody().getText().substr(0, 10);
        console.log(content);
        console.log(summary);

        // 存放到隐藏域
        $('[name="content"]').val(content);
        $('[name="summary"]').val(summary);

        // 提交表单
        $('form').submit();

    })

</script>
</body>
</html>